/* eslint-disable no-shadow */
/* eslint-disable no-param-reassign */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable no-console */
import { useEffect, useMemo } from 'react';
import ProLayout, { PageHeaderWrapper } from '@ant-design/pro-layout';
import produce from 'immer';
import { history, useDispatch } from 'umi';
import { KeepAlive, AliveScope } from 'react-activation';
import { QueryClientProvider, QueryClient } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import goodStorage from 'good-storage';
import ErrorBoundary from '@/components/ErrorBoundary';
import * as iconMap from './iconMap';
import logo from '@/assets/images/logo_yy.png';
import { settings } from './router.config';
import { ROUTES_WITH_KEEPALIVE } from '@/components/KeepAlive/shared.data';
import Updater from '@/utils/Updater';
import Nav from '@/components/KeepAlive/Nav';
import RightContent from '@/components/GlobalHeader/RightContent';
import './index.less';

const queryClient = new QueryClient();
const menuDataRender = (menuList = []) => {
  return produce(menuList, draft => {
    draft.map(item => {
      if (item.icon && typeof item.icon === 'string' && iconMap[item.icon]) {
        const Icon = iconMap[item.icon];
        item.icon = <Icon />;
      }
      return { ...item, children: item.children ? menuDataRender(item.children) : [] };
    });
  });
};
const footerRender = () => (
  <>
    <div
      style={{
        padding: '0px 24px 24px',
        textAlign: 'center',
      }}
    >
      <div className="ant-pro-global-footer-copyright">
        Copyright
        <i aria-label="图标: copyright" className="anticon anticon-copyright">
          <svg
            viewBox="64 64 896 896"
            // focusable="false"
            data-icon="copyright"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm5.6-532.7c53 0 89 33.8 93 83.4.3 4.2 3.8 7.4 8 7.4h56.7c2.6 0 4.7-2.1 4.7-4.7 0-86.7-68.4-147.4-162.7-147.4C407.4 290 344 364.2 344 486.8v52.3C344 660.8 407.4 734 517.3 734c94 0 162.7-58.8 162.7-141.4 0-2.6-2.1-4.7-4.7-4.7h-56.8c-4.2 0-7.6 3.2-8 7.3-4.2 46.1-40.1 77.8-93 77.8-65.3 0-102.1-47.9-102.1-133.6v-52.6c.1-87 37-135.5 102.2-135.5z"></path>
          </svg>
        </i>
        {new Date().getFullYear()} 鸡你太美平台
      </div>
    </div>
  </>
);

export default props => {
  const { children, location } = props;
  const dispatch = useDispatch();

  const menuClick = menuItemProps => {
    history.push(menuItemProps.path);
  };
  const currentRoute = useMemo(() => {
    return ROUTES_WITH_KEEPALIVE.find(item => {
      if (item.hasParams) {
        const path = location.pathname.split('/');
        path.pop();
        return item.path === path.join('/');
      }
      return item.path === location.pathname;
    });
  }, [location]);

  useEffect(() => {
    //实例化该类
    const up = new Updater({
      timer: 30000,
    });
    //未更新通知
    up.on('no-update', () => {});
    //更新通知
    up.on('update', () => {
      console.log('页面更新了');
      location.reload(true);
    });
  }, []);
  return (
    <ProLayout
      logo={logo}
      location={location}
      rightContentRender={rightProps => <RightContent {...rightProps} />}
      menuHeaderRender={(logoNode, titleNode) => {
        return titleNode ? (
          <div style={{ width: '100%' }}>
            <div style={{ textAlign: 'center' }}>{logoNode}</div>
            <h1 style={{ textAlign: 'center', width: '100%', marginLeft: 0 }}>
              {titleNode.props.children}
            </h1>
          </div>
        ) : (
          <div>{logoNode}</div>
        );
      }}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl) {
          return defaultDom;
        }
        return <a onClick={() => menuClick(menuItemProps)}>{defaultDom}</a>;
      }}
      onMenuHeaderClick={() => history.replace('/')}
      breadcrumbRender={(routers = []) => routers}
      itemRender={route => {
        if (route.breadcrumbName) {
          return <div key={route.breadcrumbName}>{route.breadcrumbName}</div>;
        }
        return '';
      }}
      menuDataRender={() => {
        const logInfo = goodStorage.get('loginfo', {});
        return menuDataRender(logInfo.menuData);
      }}
      footerRender={footerRender}
      onPageChange={() => {
        dispatch({
          type: 'userLogin/checkLogin',
        });
      }}
      ErrorBoundary={ErrorBoundary}
      {...settings}
    >
      <PageHeaderWrapper>
        <QueryClientProvider client={queryClient}>
          <Nav />
          <AliveScope>
            {location.pathname !== '/' ? (
              <KeepAlive
                key={location.pathname}
                title={currentRoute?.name}
                cacheKey={location.pathname}
                name={location.pathname}
              >
                {children}
              </KeepAlive>
            ) : (
              children
            )}
          </AliveScope>
          <ReactQueryDevtools initialIsOp position="bottom-right" />
        </QueryClientProvider>
      </PageHeaderWrapper>
    </ProLayout>
  );
};
